<style type="text/css">
.progressBar {
    border: 1px solid black;
}
</style>
<div ng-controller="matrixResikoCtrl">
    <div class="panel panel-default myMargin">
        <div class="panel-body">
            <form role="form">
                <div class="form-group">
                    <label class="col-xs-3">Likehood of Occurrence</label>
                    <div class="col-xs-9">
                        <select class="form-control" ng-model="likehood" ng-init="likehood=0">
                            <option value="0">-- none --</option>
                            <option value="1">> 10 in 1 year</option>
                            <option value="2">1 - 10 in 1 year</option>
                            <option value="3">1 in 1 year to 1 in 10 years</option>
                            <option value="4">1 in 10 years to 1 in 100 years</option>
                            <option value="5">1 in more than 100 years</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-3">Safety</label>
                    <div class="col-xs-9">
                        <select class="form-control" ng-model="safety" ng-init="safety=0">
                            <option value="0">-- none --</option>
                            <option value="1">near miss</option>
                            <option value="2">first aid injury, medical aid injury</option>
                            <option value="3">lost time injury / temporary disability</option>
                            <option value="4">permanent disability</option>
                            <option value="5">fatality</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-3">Extra Fuel Cost</label>
                    <div class="col-xs-9">
                        <select class="form-control" ng-model="extraFuelCost" ng-init="extraFuelCost=0">
                            <option value="0">-- none --</option>
                            <option value="1">
                                < 100 million rupiah</option>
                                    <option value="2">0,1 - 1 billion rupiah</option>
                                    <option value="3">1 - 10 billion rupiah</option>
                                    <option value="4">10 - 100 billion rupiah</option>
                                    <option value="5">> 100 billion rupiah</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-3">System Realibility</label>
                    <div class="col-xs-9">
                        <select class="form-control" ng-model="systemRealibility" ng-init="systemRealibility=0">
                            <option value="0">-- none --</option>
                            <option value="1">
                                < 100 MWh</option>
                                    <option value="2">0,1 - 1 GWh</option>
                                    <option value="3">1 - 10 GWh</option>
                                    <option value="4">10 - 100 GWh</option>
                                    <option value="5">> 100 GWh</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-3">Equipment Cost</label>
                    <div class="col-xs-9">
                        <select class="form-control" ng-model="equipmentCost" ng-init="equipmentCost=0">
                            <option value="0">-- none --</option>
                            <option value="1">
                                < 50 million rupiah</option>
                                    <option value="2">50 - 500 million rupiah</option>
                                    <option value="3">0,5 - 5 billion rupiah</option>
                                    <option value="4">5 -50 billion rupiah</option>
                                    <option value="5">> 50 billion rupiah</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-3">Customer Satisfaction/ Social Factor</label>
                    <div class="col-xs-9">
                        <select class="form-control" ng-model="customerSatisfaction" ng-init="customerSatisfaction=0">
                            <option value="0">-- none --</option>
                            <option value="1">Complaint from the VIP customer</option>
                            <option value="2">Complaint from industrial customer</option>
                            <option value="3">Complaint from community</option>
                            <option value="4">Complaint from community that have potential riot</option>
                            <option value="5">High potential riot</option>
                        </select>
                    </div>
                </div>
                <div class="col-xs-3">
                    <button type="submit" class="btn btn-default" ng-click="classifyHandler()">Classify</button>
                    <button type="submit" class="btn btn-default" ng-click="resetHandler()">Reset</button>
                </div>
            </form>
        </div>
    </div>
    <br/>
    <div class="panel panel-default myMargin">
        <div class="panel-body">
            <div class="form-group">
                <label class="col-xs-3">Risk</label>
                <div class="col-xs-9">
                    <input type="text" class="form-control" ng-model="risk" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-3">Action</label>
                <div class="col-xs-9">
                    <input type="text" class="form-control" ng-model="action" />
                </div>
            </div>
        </div>
    </div>
    <br/>
    <div class="panel panel-default myMargin">
        <div class="panel-body">
            <div class="form-group">
                <label class="col-xs-2">Risk</label>
                <div class="col-xs-10 row">
                    <div class="col-xs-3 progressBar">
                        Low 10%
                    </div>
                    <div class="col-xs-3 progressBar">
                        Moderate 11%
                    </div>
                    <div class="col-xs-3 progressBar">
                        High 12 %
                    </div>
                    <div class="col-xs-3 progressBar">
                        Extreem 0 %
                    </div>
                </div>
            </div>
            <br/>
            <div class="form-group">
                <label class="col-xs-2">Action</label>
                <div class="col-xs-10 row">
                    <div class="col-xs-3 progressBar">
                        Low 10%
                    </div>
                    <div class="col-xs-3 progressBar">
                        Moderate 11%
                    </div>
                    <div class="col-xs-3 progressBar">
                        High 12 %
                    </div>
                    <div class="col-xs-3 progressBar">
                        Extreem 0 %
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
